﻿<script src="~/Content/vue/vue.js"></script>
<script src="~/Content/axios/axios.js"></script>

@{
    Layout = null;
}

<div id="EditPage">

    <div class="portlet">

        <h2>菜单信息</h2>
        <div class="portlet-body form">

            <form class="form-horizontal" id="formHouseType">

                <div class="row form-body">

                    <fieldset class="row ">

                        <div class="form-group">
                            <label class="control-label col-md-4">菜单名称</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" v-model:value="model.DisplayName" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4">图标</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" v-model:value="model.Icon" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4">排序</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" v-model:value="model.Order" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4">链接</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" v-model:value="model.Url" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-4">父级菜单</label>
                            <div class="col-md-4">
                                <input class="form-control" type="text" v-model:value="model.ParentId" />
                            </div>
                        </div>

                    </fieldset>

                </div>

                <div class="form-actions fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-offset-6">
                                <div>
                                    <button type="button" class="btn green" v-on:click="save()">提交</button>
                                    <button type="button" class="btn green" v-on:click="returnPage()">返回</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- END FORM-->
        </div>

    </div>

</div>



<script>
    var edit = new Vue({
        el: '#EditPage',
        data: {
            model: {}
        },
        beforeCreate: function () {

            $("@ViewBag.ListPage").hide();

            axios.post("@Url.Action("GetMenu")", { id:  '@ViewBag.Id' })
                .then(function (response) {
                    edit.model = response.data
                });
        },
        methods: {
            save: function (index) {
                $.ajax({
                    url: "@Url.Action("SaveMenu")",
                    data: edit.model,
                    type: 'Post',
                    success: function () {
                        edit.returnPage();
                    }
                });

            },
            returnPage: function () {
                app.search();
                $("@ViewBag.ListPage").show();
                $("#EditPage").hide();
            }

        }
    })



</script>